<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>

    <script>
        //获取请求的参数
        var params = getParams();
        var authorId;
        var user = JSON.parse(sessionStorage.getItem("user"));


        $(function () {

            if (params.id){
                $.get('/travels/'+params.id,function (data) {
                    console.log(data);
                    authorId=data.author.id;
                    $('.travels').renderValues(data);

                    //点赞
                    $('#likeBtn').click(function () {
                        console.log($('#likeBtn').hasClass('fa-thumbs-o-up'));
                        var user = JSON.parse(sessionStorage.getItem("user"));
                        if (user){
                            //判断当前是否点赞
                            if ($('#likeBtn').hasClass('fa-thumbs-o-up')){
                                $.ajax({
                                    url:"/travels/"+params.id+"/like",
                                    type:"post",
                                    success:function (data) {
                                        $('#likeBtn').html(data.result);
                                        $('#likeBtn').removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up");
                                    }
                                })
                            }else {
                                $.ajax({
                                    url:"/travels/"+params.id+"/disLike",
                                    type:"delete",
                                    success:function (data) {
                                        $('#likeBtn').html(data.result);
                                        $('#likeBtn').removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up");
                                    }
                                })
                            }
                        }else {
                            window.location.href = "/login.html";
                        }
                    });


                    //查看当前用户是否点赞
                    var user = JSON.parse(sessionStorage.getItem("user"));
                    if(user){
                        $.get("/users/fabulous/"+params.id,function (data) {
                            if (data.result){
                                $('#likeBtn').removeClass('fa-thumbs-o-up');
                                $('#likeBtn').addClass('fa-thumbs-up');
                            }
                        })
                    }

                    //判断当前是否是登录用户

                    if (user){
                        //当用户页面是自己查看时
                        if(user.id == authorId){
                            $('#followBtn').css("display","none");
                        }else{
                            //查看当前用户是否已经关注
                            $.get("/users/isAttention/"+authorId,function (data) {
                                if (data.result){
                                    $('#followBtn').html("已关注");
                                }else {
                                    $('#followBtn').html("关注");
                                }
                            })
                        }
                    }

                    //关注用户
                    $('#followBtn').click(function () {
                        if (user){
                            //关注
                            if($('#followBtn').html()=="关注"){
                                $.ajax({
                                    url:"/users/attention/"+authorId,
                                    type:"post",
                                    success:function (data) {
                                        $('#followBtn').html("已关注");
                                        $('#fansNum').html(data.result);
                                    }
                                })
                            }else {
                                //取消关注
                                $.ajax({
                                    url:"/users/disAttention/"+authorId,
                                    type:"delete",
                                    success:function (data) {
                                        $('#followBtn').html("关注");
                                        $('#fansNum').html(data.result);
                                    }
                                })
                            }

                        }else{
                            window.location.href="/login.html";
                        }

                    });
                });

                if (user){
                    //查看当前用户是否收藏了该游记
                    $.get("/users/collectionTravel/"+params.id,function (data) {
                        if(data.result){
                            $('#collectBtn').removeClass("fa-star-o").addClass("fa-star");
                        }else {
                            $('#collectBtn').removeClass("fa-star").addClass("fa-star-o");
                        }
                    });
                }

                //收藏游记
                $('#collectBtn').click(function () {
                    //判断用户是否登录
                    if (user){
                        if($('#collectBtn').hasClass("fa-star-o")){
                            $.ajax({
                                url:"/travels/collect/"+params.id,
                                type:"patch",
                                success:function (data) {
                                    $('#collectBtn').html(data.result);
                                    $('#collectBtn').removeClass("fa-star-o").addClass("fa-star");
                                }
                            })
                        }else{
                            $.ajax({
                                url:"/travels/disCollect/"+params.id,
                                type:"patch",
                                success:function (data) {
                                    $('#collectBtn').html(data.result);
                                    $('#collectBtn').removeClass("fa-star").addClass("fa-star-o");
                                }
                            })
                        }
                    }else{
                        window.location.href="/login.html";
                    }
                });
            }

        })
    </script>

</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img  class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span>2018-07-11</span>
            浏览 <span> 0</span>
            回复 <span> 0</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <img class="rounded-circle" render-src="author.headImgUrl">
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName"></span>
                    <button class="btn" id="followBtn">关注</button>
                    <br>
                    <span>0</span>篇游记
                    <span id="fansNum" render-html="author.fans"></span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>
    ,
    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends">120</span></div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-html="personName"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days"></span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="travelContent.content"></div>
    </div>

    <hr>

    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up"  id="likeBtn" render-html="fabulousNum"></i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o"  id="commentBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa fa-star-o" id="collectBtn" render-html="collectionNum"> </i>
        </div>
    </div>
</div>



</body>

</html>